<template>
	<el-button @click="$refs['dialog'].open({})">配置接口信息</el-button>
	<mdp-dialog ref="dialog">
		<el-form label-width="100px">
			<el-tabs v-model="activeTab">
				<el-tab-pane label="单条数据查询接口" name="query"> 
						<el-form-item label="接口类型">
							<mdp-select show-style="tag" v-model="crudApis.query.apiType" :options="apiTypeOptions"
								@change="(val) => onApiTypeChange(crudApis.query, val)" />
						</el-form-item>
						<el-form-item label="请求地址">
							<el-input v-model="crudApis.query.action" />
						</el-form-item>
						<el-form-item label="请求方式">
							<mdp-select show-style="tag" v-model="crudApis.query.method" :options="methodOptions" />
						</el-form-item>
						<el-form-item label="请求参数">
							<el-input rows="6" type="textarea" v-model="crudApis.query.paramsStr" /> 
							<Icon icon="fa:question-circle-o"  @click="$refs['remarksDialog'].open()" />
						</el-form-item>
						<el-form-item label="表格" v-if="crudApis.query.apiType == '2'">
							<MdpInputTableName v-model="crudApis.query.params.tableName"
								@dataSourceChange="(val) => crudApis.query.params.dataSource = val" />
						</el-form-item>
						<el-form-item label="数据源" v-if="crudApis.query.apiType == '2'">
							<MdpSelectDataSource show-style="tag" v-model="crudApis.query.params.dataSource" />
						</el-form-item>
						<el-form-item label="数据集" v-if="crudApis.query.apiType == '3'">
							<MdpInputDataSet v-model="crudApis.query.params.dataSetId" />
						</el-form-item> 
				</el-tab-pane>
				<el-tab-pane label="列表数据查询接口" name="list"> 
								
						<el-form-item label="接口类型">
							<mdp-select show-style="tag" v-model="crudApis.list.apiType" :options="apiTypeOptions"
								@change="(val) => onApiTypeChange(crudApis.list, val)" />
						</el-form-item>
						<el-form-item label="请求地址">
							<el-input v-model="crudApis.list.action" />
						</el-form-item>
						<el-form-item label="请求方式">
							<mdp-select show-style="tag" v-model="crudApis.list.method" :options="methodOptions" />
						</el-form-item>
						<el-form-item label="请求参数">
							<el-input rows="6" type="textarea" v-model="crudApis.list.paramsStr" />
							<Icon icon="fa:question-circle-o"  @click="$refs['remarksDialog'].open()" />
						</el-form-item>
						<el-form-item label="表格" v-if="crudApis.list.apiType == '2'">
							<MdpInputTableName v-model="crudApis.list.params.tableName"
								@dataSourceChange="(val) => crudApis.list.params.dataSource = val" />
						</el-form-item>
						<el-form-item label="数据源" v-if="crudApis.list.apiType == '2'">
							<MdpSelectDataSource show-style="tag" v-model="crudApis.list.params.dataSource" />
						</el-form-item>
						<el-form-item label="数据集" v-if="crudApis.list.apiType == '3'">
							<MdpInputDataSet v-model="crudApis.list.params.dataSetId" />
						</el-form-item> 
				</el-tab-pane>
				<el-tab-pane label="新增接口"  name="add">   
						<el-form-item label="接口类型">
							<mdp-select show-style="tag" v-model="crudApis.add.apiType" :options="apiTypeOptions"
								@change="(val) => onApiTypeChange(crudApis.add, val)" />
						</el-form-item>
						<el-form-item label="请求地址">
							<el-input v-model="crudApis.add.action" />
						</el-form-item>
						<el-form-item label="请求方式">
							<mdp-select show-style="tag" v-model="crudApis.add.method" :options="methodOptions" /> </el-form-item>
						<el-form-item rows="6" label="请求参数">
							<el-input type="textarea" v-model="crudApis.add.paramsStr" />
							<Icon icon="fa:question-circle-o"  @click="$refs['remarksDialog'].open()" />
						</el-form-item>
						<el-form-item label="表格" v-if="crudApis.add.apiType == '2'">
							<MdpInputTableName v-model="crudApis.add.params.tableName"
								@dataSourceChange="(val) => crudApis.add.params.dataSource = val" />
						</el-form-item>
						<el-form-item label="数据源" v-if="crudApis.add.apiType == '2'">
							<MdpSelectDataSource show-style="tag" v-model="crudApis.add.params.dataSource" />
						</el-form-item>
						<el-form-item label="数据集" v-if="crudApis.add.apiType == '3'">
							<MdpInputDataSet v-model="crudApis.add.params.dataSetId" />
						</el-form-item> 
				</el-tab-pane>
				<el-tab-pane label="修改接口"  name="edit">  
						<el-form-item label="接口类型">
							<mdp-select show-style="tag" v-model="crudApis.edit.apiType" :options="apiTypeOptions"
								@change="(val) => onApiTypeChange(crudApis.edit, val)" />
						</el-form-item>
						<el-form-item label="请求地址">
							<el-input v-model="crudApis.edit.action" />
						</el-form-item>
						<el-form-item label="请求方式">
							<mdp-select show-style="tag" v-model="crudApis.edit.method" :options="methodOptions" />
						</el-form-item>
						<el-form-item rows="6" label="请求参数">
							<el-input type="textarea" v-model="crudApis.edit.paramsStr" />
							<Icon icon="fa:question-circle-o"  @click="$refs['remarksDialog'].open()" />
						</el-form-item>
						<el-form-item label="表格" v-if="crudApis.edit.apiType == '2'">
							<MdpInputTableName v-model="crudApis.edit.params.tableName"
								@dataSourceChange="(val) => crudApis.edit.params.dataSource = val" />
						</el-form-item>
						<el-form-item label="数据源" v-if="crudApis.edit.apiType == '2'">
							<MdpSelectDataSource show-style="tag" v-model="crudApis.edit.params.dataSource" />
						</el-form-item>
						<el-form-item label="数据集" v-if="crudApis.edit.apiType == '3'">
							<MdpInputDataSet v-model="crudApis.edit.params.dataSetId" />
						</el-form-item> 
				</el-tab-pane>
				<el-tab-pane label="删除接口"  name="del">  
						<el-form-item label="接口类型">
							<mdp-select show-style="tag" v-model="crudApis.del.apiType" :options="apiTypeOptions"
								@change="(val) => onApiTypeChange(crudApis.del, val)" />
						</el-form-item>
						<el-form-item label="请求地址">
							<el-input v-model="crudApis.del.action" />
						</el-form-item>
						<el-form-item label="请求方式">
							<mdp-select show-style="tag" v-model="crudApis.del.method" :options="methodOptions" />
						</el-form-item>
						<el-form-item rows="6" label="请求参数">
							<el-input type="textarea" v-model="crudApis.del.paramsStr" />
							<Icon icon="fa:question-circle-o"  @click="$refs['remarksDialog'].open()" />
						</el-form-item>
						<el-form-item label="表格" v-if="crudApis.del.apiType == '2'">
							<MdpInputTableName v-model="crudApis.del.params.tableName"
								@dataSourceChange="(val) => crudApis.del.params.dataSource = val" />
						</el-form-item>
						<el-form-item label="数据源" v-if="crudApis.del.apiType == '2'">
							<MdpSelectDataSource show-style="tag" v-model="crudApis.del.params.dataSource" />
						</el-form-item>
						<el-form-item label="数据集" v-if="crudApis.del.apiType == '3'">
							<MdpInputDataSet v-model="crudApis.del.params.dataSetId" />
						</el-form-item> 
				</el-tab-pane>
				<el-tab-pane label="批量修改接口"  name="editSomeFields">  
						<el-form-item label="接口类型">
							<mdp-select show-style="tag" v-model="crudApis.editSomeFields.apiType" :options="apiTypeOptions"
								@change="(val) => onApiTypeChange(crudApis.editSomeFields, val)" />
						</el-form-item>
						<el-form-item label="请求地址">
							<el-input v-model="crudApis.editSomeFields.action" />
						</el-form-item>
						<el-form-item label="请求方式">
							<mdp-select show-style="tag" v-model="crudApis.editSomeFields.method" :options="methodOptions" />
						</el-form-item>
						<el-form-item rows="6" label="请求参数">
							<el-input type="textarea" v-model="crudApis.editSomeFields.paramsStr" />
							<Icon icon="fa:question-circle-o"  @click="$refs['remarksDialog'].open()" />
						</el-form-item>
						<el-form-item label="表格" v-if="crudApis.editSomeFields.apiType == '2'">
							<MdpInputTableName v-model="crudApis.editSomeFields.params.tableName"
								@dataSourceChange="(val) => crudApis.editSomeFields.params.dataSource = val" />
						</el-form-item>
						<el-form-item label="数据源" v-if="crudApis.editSomeFields.apiType == '2'">
							<MdpSelectDataSource show-style="tag" v-model="crudApis.editSomeFields.params.dataSource" />
						</el-form-item>
						<el-form-item label="数据集" v-if="crudApis.editSomeFields.apiType == '3'">
							<MdpInputDataSet v-model="crudApis.editSomeFields.params.dataSetId" />
						</el-form-item> 

				</el-tab-pane>
			</el-tabs> 
			<el-form-item>
				<el-row class="footer">
					<el-button @click="testApi(crudApis.query)">测试接口</el-button>
								<el-button title="将参数从单查接口同步到增、删、改、列表接口上，避免重复配置" v-if="crudApis.query.apiType == '2'"
									@click="pushParamsToOtherApis(crudApis.query)">同步查询参数到增、删、改、列表接口</el-button> 
									<el-button type="primary" @click="onConfirm">确认</el-button>
				</el-row>
			</el-form-item>
		</el-form>
	</mdp-dialog>
	<mdp-dialog ref="remarksDialog">
		<el-text>
			必须为json格式，可以从表单数据中提取数据作为参数上传到接口,<br />
							获取表单元素的值${formData.*},*可替换为表单元素中任意字段的id<br />
							获取表单入参的值${params.*},*可替换为表单入参中任意字段的id<br />
							获取当前登录用户的信息${userInfo.*},*可替换为userid、username、brancchId、deptid<br />
							{<br />
							id:${formData.userid},<br />
							name:${formData.username}<br />
							}<br />
		</el-text>
	</mdp-dialog>
</template> 
<script>

import axios from '@/config/maxios'

import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'

const mdpTableDataPreUrl = "/dm/data";
const mdpDataSetPreUrl = "/dm/data";
export default {
	name: 'MdpCrudApisCfg',
	props: {
		modelValue: {
			type: String,
			default: function () {
				return null
			}
		}
	},
	data() {
		return {
			apiTypeOptions: [{ id: '1', name: '普通接口' }, { id: '2', name: '唛盟表格' }, { id: '3', name: '唛盟数据集' }, { id: '4', name: '外部传入表单数据，无须执行查询' }, { id: '5', name: '提交事件外抛，无须配置提交接口' }],
			methodOptions: [{ id: 'get', name: 'get' }, { id: 'post', name: 'post' }],
			apiType: '2',//  
			crudApis: {
				list: {
					apiType: '2',
					action: "/" + this.$mdp.getDmCtx() + mdpTableDataPreUrl + '/list',
					method: 'get',
					params: {},
				},
				query: {
					apiType: '2',
					action: "/" + this.$mdp.getDmCtx() + mdpTableDataPreUrl + '/queryById',
					method: 'get',
					params: {},
				},

				add: {
					apiType: '2',
					action: "/" + this.$mdp.getDmCtx() + mdpTableDataPreUrl + '/add',
					method: 'post',
					params: {},
				},

				edit: {
					apiType: '2',
					action: "/" + this.$mdp.getDmCtx() + mdpTableDataPreUrl + '/edit',
					method: 'post',
					params: {},
				},

				del: {
					apiType: '2',
					action: this.$mdp.getDmCtx() + mdpTableDataPreUrl + '/del',
					method: 'post',
					params: {},
				},

				editSomeFields: {
					apiType: '2',
					action: "/" + this.$mdp.getDmCtx() + mdpTableDataPreUrl + '/editSomeFields',
					method: 'post',
					params: {},
				},
			},
			crudApisInit: {},
			activeTab:'query'
		}
	},
	computed: {
		...mapState(useUserStore, ['userInfo']),
		value: {
			set(val) {
				this.$emit('update:modelValue', val)
			},
			get() {
				return this.modelValue
			}
		}
	},
	watch: {
		value(val) {
			if (val) {
				this.crudApis = JSON.parse(val)
			}
		}
	},
	methods: {
		parseJson(jsonStr) {
			try {
				var json = JSON.parse(jsonStr)
				return json;
			} catch (e) {
				return eval("(" + jsonStr + ")")
			}

		},
		tplParse(tplStr) {
			if (!tplStr) {
				return tplStr
			} else {
				var userInfoKey = "userInfo."
				const result = tplStr.replace(/\${(.*?)}/g, (match, key) => {
					var indexOf = key.indexOf(userInfoKey)
					if (indexOf >= 0) {
						var columnName = key.substring(userInfoKey.length)
						var camelName = this.$mdp.toCamel(columnName)
						return "'" + this.userInfo[camelName] + "'"
					} else {
						return match
					}
				});
				return result;
			}
		},
		testApi(api) {
			var func = api.method == 'get' ? axios.get : axios.post
			var paramsStr = api.paramsStr
			if (paramsStr) {
				paramsStr = this.tplParse(paramsStr)
			}
			var params = {}
			if (paramsStr) {
				params = this.parseJson(paramsStr)
			}
			Object.assign(params, api.params)
			func(api.action, api.method == 'get' ? { params: params } : params).then(res => {
				let { tips, data } = res
				if (tips) {
					if (tips.isOk) {
						this.$message({ message: tips.msg, type: 'success' })
					} else {
						this.$message({ message: tips.msg, type: 'error' })
					}
				} else {
					this.$message({ message: "接口正常，返回结果：" + JSON.stringify(res), type: 'success' })
				}
			}).catch(e => {
				this.$message({ message: "接口异常，返回结果：" + e.message, type: 'error' })
			})
		},
		onConfirm() {
			this.value = JSON.stringify(this.crudApis)
			this.$refs['dialog'].close()
		},
		pushParamsToOtherApis(api) {
			if (this.crudApis.add.apiType == api.apiType) {
				Object.assign(this.crudApis.add.params, api.params)
			}
			if (this.crudApis.list.apiType == api.apiType) {
				Object.assign(this.crudApis.list.params, api.params)
			}
			if (this.crudApis.edit.apiType == api.apiType) {
				Object.assign(this.crudApis.edit.params, api.params)
			}
			if (this.crudApis.del.apiType == api.apiType) {
				Object.assign(this.crudApis.del.params, api.params)
			}
			if (this.crudApis.editSomeFields.apiType == api.apiType) {
				Object.assign(this.crudApis.editSomeFields.params, api.params)
			}
			this.$message({ message: '同步参数的新增、查询列表、删除、修改接口成功', type: 'success' })
		}
	},
	mounted() {
		this.crudApisInit = Object.assign({}, this.crudApis)
		if (this.modelValue) {
			this.crudApis = JSON.parse(this.modelValue)
		}
	}
}
</script>
